<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加用户 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除用户 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<script type="text/html" id="statusTemp">
    <input class="layui-btn-xs" type="checkbox" name="siteStatus" lay-skin="switch" lay-text="开启|关闭" value={{ d.id}}
    {{d.state=='on'?'checked':'off'}} lay-filter="status">
</script>

<script type="text/html" id="fixedTemp">
    <input class="layui-btn-xs" type="checkbox" name="siteStatus" lay-skin="switch" lay-text="开启|关闭" value={{ d.id}}
    {{d.fixed=='on'?'checked':'off'}} lay-filter="fixeds">
</script>

<script type="text/html" id="columnTemp">
    <button class="layui-btn layui-btn-xs">{{d.column}}</button>
</script>
<!-- lay-submit="" lay-filter="adadd" -->
<script type="text/html" id="contentTemp">
    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="showcode(this)">{{=d.content}}</button>
</script>

<script id="model" type="text/html">
    <form class="layui-form layui-form-pane" id="bannerset" lay-filter="bannerset" style="padding: 20px">
        <!--隐藏id-->
        <input name="siteId" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">广告备注</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" placeholder="请输入广告备注" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">绑定栏目</label>
            <div class="layui-input-block">
                <select name="bindColumn" lay-filter="aihao" id="bindColumn"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">广告排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="required" placeholder="数字越大越靠前" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">广告内容</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入广告代码,支持HTML,CSS,JS" name="code" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="doSubmit" id="doSubmit" value="确认">
        </div>
    </form>

</script>

<script type="text/html" id="codeTemp">
  <pre class="layui-code">
//代码区域
var a = 'hello layui';
</pre>      
</script>
<script>
    layui.use(['form', 'table', 'miniPage', 'lycms', 'code'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            code = layui.code,
            lycms = layui.lycms;
        form.render();
        table.render({
            elem: '#currentTableId',
            url: '/v1/admin/data/adlist',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                { field: 'id', width: 60, title: 'ID', sort: true },
                { field: 'title', title: '广告备注', width: 150, },
                { field: 'column', templet: '#contentTemp', title: '广告代码', align: "center", },
                { field: 'column', templet: '#columnTemp', title: '绑定栏目', align: "center", width: 180 },
                { field: 'sort', width: 120, title: '排序', align: "center", width: 100, sort: true },
                { field: 'fixed', templet: '#fixedTemp', title: '固定', width: 100, align: "center" },
                { field: 'state', templet: '#statusTemp', title: '状态', width: 100, align: "center" },
                { field: 'time', title: '添加时间', sort: true, width: 150, align: "center" },
                { title: '操作', width: 135, templet: '#currentTableBar', fixed: "right", align: "center" }
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true
        });

        // 监听状态
        form.on('switch(status)', function (data) {
            $.ajax({
                url: "/ask/action/system/ad/edit",
                type: "post",
                dataType: "json",
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                data: {
                    id: data.value,
                    statu: data.elem.checked ? 'on' : ''
                },
                success: function (res) {
                    if (res.code == 200) {
                        table.reload('LAY-user-manage'); //重载表格数据 成功后调用
                        layer.msg(res.msg, { time: 1500 });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        });

        // 监听状态
        form.on('switch(fixeds)', function (data) {
            $.ajax({
                url: "/ask/action/system/ad/edit",
                type: "post",
                dataType: "json",
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                data: {
                    id: data.value,
                    fixed: data.elem.checked ? 'on' : ''
                },
                success: function (res) {
                    if (res.code == 200) {
                        table.reload('LAY-user-manage'); //重载表格数据 成功后调用
                        layer.msg(res.msg, { time: 1500 });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        });

        //获取初始信息
        window.showcode = function showcode(data) {
            var dat = '<pre class="layui-code" style="margin: 5px;">';
            dat = dat + $(data).html();
            dat = dat + "</pre>";
            console.log($(data).html());
            var index = layer.open({
                title: '广告代码',
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                // area: ['72%'], //宽高
                content: dat,
                success: function (layero, index) {
                    layui.code({ about: false });
                    // 刷新表单
                    form.render();
                }
                // content: $("#codeTemp").html(dat)
            });

        }
        // 监听操作
        table.on('tool(currentTableFilter)', function (obj) {
            // 操作
            lycms.adOperate(obj, "#model", "doSubmit");
        });

    });
</script>